<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>联系人查询</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../../layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="../../layuiadmin/style/admin.css" media="all">
</head>
<body>
    <div class="layui-card-body">
        <form>
            <label>联系人姓名：</label>
            <div class="layui-input-inline">
                <input type="text" class="layui-input" id="personName" placeholder="请输入联系人姓名">
            </div>
            <label style="padding-left:45px;"></label>
            <button id="search" type="button" class="layui-btn layui-btn-radius" data-type="reload">查 询</button>
            <a class="layui-btn layui-btn-danger layui-btn-sm" style="margin-left: 20px;" id="T" href="javascript:getSUP();">+添加联系人</a>
            <br>
            <table class="layui-hide" id="contactTable" lay-filter="demo"></table>
        </form>
    </div>
    <script src="../../layuiadmin/layui/layui.js?t=1"></script>
    <!-- 操作按钮 -->
    <script type="text/html" id="barDemo">
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">禁用</a>
    </script>
    <script>
        layui.use('table', function(){
            var table = layui.table;
            var $ = layui.$;

            table.render({
                elem: '#contactTable'
                ,url:'http://localhost:8086/selectContactForPage'
                ,cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
                ,data:[]
                ,cols:
                    [
                        [
                            {field:'personId',    width:120,  title: '联系人ID',    sort: true}
                            ,{field:'vendorId',   width:120,  title: '商户ID',      sort: true}
                            ,{field:'personName', width:120,  title: '联系人姓名',  sort: true}
                            ,{field:'phone',      width:120,  title: '联系人电话',  sort: true}
                            ,{field:'bidderYN',   width:60,  title: '主联系人与否', sort: true}
                            ,{field:'description',width:60,  title: '备注',         sort: true}
                            ,{field:'enableFlag', width:60,  title: '是否启用',     sort: true}
                            ,{field:'lastUpdateDate',width:100, title: '更改时间',  sort: true}
                            ,{field:'lastUpdatedBy', width:100, title: '更改人',    sort: true}
                            ,{field:'creationDate',  width:100, title: '创建时间',  sort: true}
                            ,{field:'createdBy',     width:100, title: '创建人',    sort: true}
                            ,{fixed: 'right',    title:'操作',   toolbar: '#barDemo', width:150}
                        ]
                    ]
                ,page: true
                ,done:function(data){}
            });
            //为工具条添加监听
            //这里括号里对应table设置的lay-filter属性！！
            table.on('tool(demo)', function(obj) {
                //获取当前行数据
                var data = obj.data;
                //获取event对应的值
                var event = obj.event;
                //获取当前行的dom对象
                var tr = obj.tr;

                if (event === 'edit') {	//如果点击了修改按钮
                    //执行修改方法
                    var layer = layui.layer;
                    layer.open({
                        type: 2,
                        title: "+编辑联系人",
                        area: ['800px', '480px'],
                        skin: 'layui-layer-rim',
                        content: ['http://localhost:8086/page?url=new/updateContact.html'],
                        success : function(layero, index){
                            var body = layui.layer.getChildFrame('body', index);
                            if(data){
                                // 取到弹出层里的元素，并把编辑的内容放进去.
                                body.find("#personId").val(data.personId); //将选中的数据的id传到编辑页面的隐藏域，便于根据ID修改数据
                                body.find("#personName").val(data.personName);
                                body.find("#phone").val(data.phone);
                                body.find("#bidderYN input[value="+data.bidderYN+"]").prop("checked","checked");  //主联系人与否
                                body.find("#description").val(data.description);  //备注
                                // 记得重新渲染表单
                                form.render();
                            }
                            setTimeout(function(){
                                layui.layer.tips('点击此处返回用户列表', '.layui-layer-setwin .layui-layer-close', {
                                    tips: 3
                                });
                            },500)
                        }
                    });
                } else if (event === 'del') {	//如果点击了删除按钮
                    //执行异步删除方法
                    //删除方法
                    layer.confirm('真的禁用此联系人吗?', function(index){
                        //index表示第几次弹出层不是索引值，也不是主键等信息
                        //刷新页面重置
                        $.ajax({
                            url:'http://localhost:8086/delContact',
                            data:{'personId':data.personId},
                            type:"Post",
                            dataType:"json",
                            success:function(data){
                                console.log(data);
                                layer.msg(data.msg);
                                location.reload(); //禁用成功后再刷新*/
                                obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                                layer.close(index);
                            },
                            error:function(data){
                                $.messager.alert('错误',data.msg);
                            }
                        });
                    })
                }
            });

            //查询
            var active = {
                reload: function () {
                    //搜索，执行重载
                    table.reload('contactTable', {
                        url: 'http://localhost:8086/selectContactForPage'
                        ,where: {
                            /*id: document.getElementById("uid").value*/
                            personName: document.getElementById("personName").value
                        }
                    });
                }
            };
            $('#search').on('click', function () {
                var type = $(this).data('type');
                console.info(type);
                active[type] ? active[type].call(this) : '';
            });
        });

        function getSUP() {
            var layer = layui.layer;
            layer.open({
                type: 2,
                title: "+添加联系人",
                area: ['800px', '480px'],
                skin: 'layui-layer-rim',
                content: ['http://localhost:8086/page?url=new/insertContact.html']
            });
        }
    </script>
</body>
</html>